<template>
  <div class="right">
    <h1>孕期推荐食谱</h1>
    <ul>
      <li @click="goDetail">
        <img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=b0a81c4ba60f4bfb8cd099523b741fcd/2fdda3cc7cd98d1033437fe5233fb80e7aec904a.jpg" alt="">
        <h3>菠萝虾球</h3>
        <p>水果与海鲜的碰撞，口感与众不同</p>
        <p>适合孕期妈妈</p>
      </li>
      <li @click="goDetail">
        <img src="https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=691c146b2df5e0feea188e036c6034e5/bba1cd11728b47102011e6bec3cec3fdfc032381.jpg" alt="">
        <h3>板栗烧鸡翅</h3>
        <p>让准妈妈食欲大增</p>
        <p>适合孕期妈妈</p>
      </li>
      <li @click="goDetail">
        <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2544391872,1748518522&fm=26&gp=0.jpg" alt="">
        <h3>西梅饼干</h3>
        <p>浓浓果香在里面，刺激食欲呢</p>
        <p>适合孕期妈妈</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      foodlist: []
    }
  },
  methods: {
    goDetail () {
      this.$router.push('/detail')
    }
  }
}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.right {
  @include rect(78%, 100%);
  // overflow: auto;
  float: left;
  h1 {
    padding: 0.15rem 0 0 0.1rem;
  }
  ul {
    @include rect(96%, 100%);
    margin: 3% auto;
    li {
      height: 0.9rem;
      border-bottom: 1px solid #cccccc;
      img {
        @include rect(0.6rem, 0.6rem);
        float: left;
        margin: 0.1rem;
      }
      h3 {
        @include rect(70%, auto);
        float: left;
        font-size: 0.14rem;
        line-height: 0.25rem;
        color: rgb(17, 17, 17);
        font-family: PingFangSC-regular;
        font-weight: 500;
        margin-top: 0.1rem;
      }
      p {
        font-size: 0.12rem;
        line-height: 0.2rem;
        color: #838383;
      }
    }
  }
}
</style>
